<template>
  <div>
    <div>
      <div class="div-a">
        <el-row style="padding: 20px">
          <el-col :span="24">
            <span>会员统计</span>
          </el-col>
        </el-row>
        <el-row style="padding: 20px">
          <el-col :span="2">
            <div>统计类型</div>
          </el-col>
          <el-col :span="3">
            <el-select v-model="search.value" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" style="padding-left: 20px">
            <span>日期</span>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              :disabled="search.value === 'b' ? true : false"
              v-model="search.startTime"
              value-format="yyyy-MM-dd"
              clearable
              :picker-options="startDatePicker"
              type="date"
              placeholder="请选择开始时间"
            ></el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              :disabled="search.value === 'b' ? true : false"
              v-model="search.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              clearable
              :picker-options="endDatePicker"
              type="date"
              placeholder="请选择结束时间"
            ></el-date-picker>
          </el-col>
          <el-col :span="2">
            <el-button icon="el-icon-search" @click="dateif()"></el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        height="365px"
        size="small"
        current-row-key="id"
        :data="h_MemberOfTheFileList"
        stripe
        highlight-current-row
      >
        <div v-if="asc">
          <el-table-column
            align="center"
            prop="hFn"
            label="档案号"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hName"
            label="姓名"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hSex"
            label="性别"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hAge"
            label="年龄"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hRegistration"
            label="注册日期"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hThehealthmanager"
            label="健康管理师"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hPhone"
            label="手机号码"
            header-align="center"
          ></el-table-column>
        </div>
        <div v-if="!asc">
          <el-table-column
            align="center"
            prop="hMemberofthefile.hFn"
            label="档案号"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hMemberofthefile.hName"
            label="姓名"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hMemberofthefile.hSex"
            label="性别"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hMemberofthefile.hAge"
            label="年龄"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="orderdate"
            label="预约日期"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hMemberofthefile.hThehealthmanager"
            label="健康管理师"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hMemberofthefile.hPhone"
            label="手机号码"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="setmeal.name"
            label="检测套餐"
            header-align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            :formatter="stateFormat"
            label="报告状态"
            prop="tstatic"
            header-align="center"
          ></el-table-column>
        </div>
      </el-table>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="MemberTotal"
        >
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<style scoped>
.div-a {
  background-color: #b7d7e9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>

<!-- 会员统计 -->
<script>
import { listSelectNoun, listtOrderMemberNoun } from "@/api/RReporttoupload";
export default {
  data() {
    return {
      asc: true,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      options: [
        {
          value: "a",
          label: "所有会员",
        },
        {
          value: "b",
          label: "新增会员",
        },
        {
          value: "c",
          label: "已预约人数",
        },
        {
          value: "d",
          label: "报告上传",
        },
      ],
      MemberTotal: 0,
      h_MemberOfTheFileList: [],
      search: {
        offset: 1,
        limit: 0,
        value: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    async pageInit() {
      this.getMemberNuonList();
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      if (this.search.value == "" || this.search.value == "a") {
        this.search.limit = 5;
        this.getMemberNuonList();
      } else {
        this.search.limit = 4;
        this.getMemberList();
      }
    },
    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      if (this.search.value == "" || this.search.value == "a") {
        this.search.limit = 0;
        this.getMemberNuonList();
      } else {
        this.search.limit = 0;
        this.getMemberList();
      }
    },
    stateFormat(row, column) {
      if (row.tstatic == 0) {
        return "报告未上传";
      } else {
        return "报告已上传";
      }
    },
    //三表查询
    getMemberList() {
      this.search.limit = 4;
      this.h_MemberOfTheFileList = [];
      this.asc = false;
      this.dataNull();
      listSelectNoun(this.search)
        .then((response) => {
          this.MemberTotal = response.data.total;
          this.h_MemberOfTheFileList = response.data.rows;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    //查询会员
    getMemberNuonList() {
      this.search.limit = 5;
      this.h_MemberOfTheFileList = [];
      this.asc = true;
      this.dataNull();
      listtOrderMemberNoun(this.search)
        .then((response) => {
          this.MemberTotal = response.data.total;
          this.h_MemberOfTheFileList = response.data.rows;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    dataNull() {
      if (this.search.startTime == "") {
        this.search.startTime = null;
      }
      if (this.search.endTime == "") {
        this.search.endTime = null;
      }
    },
    dateif() {
      this.dataNull();
      if (
        this.search.value == "" ||
        this.search.value == "a" ||
        this.search.value == "b"
      ) {
        if (this.search.startTime == null && this.search.endTime == null) {
          this.getMemberNuonList();
        } else if (this.search.startTime == null) {
          this.$message({
            message: "请选择开始日期",
            type: "warning",
          });
        } else if (this.search.endTime == null) {
          this.$message({
            message: "请选择结束日期",
            type: "warning",
          });
        } else {
          this.getMemberNuonList();
        }
      } else {
        if (this.search.startTime == null && this.search.endTime == null) {
          this.getMemberList();
        } else if (this.search.startTime == null) {
          this.$message({
            message: "请选择开始日期",
            type: "warning",
          });
        } else if (this.search.endTime == null) {
          this.$message({
            message: "请选择结束日期",
            type: "warning",
          });
        } else {
          this.getMemberList();
        }
      }
    },
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.search.endTime) {
            //如果结束时间不为空，则小于结束时间
            return new Date(self.search.endTime).getTime() < time.getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.search.startTime) {
            //如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.search.startTime).getTime() > time.getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
  },
  created() {
    this.pageInit();
  },
};
</script>